<template>
  <el-container>
    <el-header>
      <div>
        <!-- <img id="megumi" src="../assets/img/8888.pngt="" /> -->
        <span class="systemName">叮叮网上书城后台</span>
      </div>
    </el-header>
    <el-main>
      <el-container>
        <el-card class="contain_box">
          <el-container>
            <!-- 侧边栏 -->
            <el-aside width="210px" style="ba-color: rgb(238, 241, 246);">
              <!-- 侧边栏菜单 -->
              <el-col :span="24">
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" text-color="#303133"
                  active-text-color="#409EFF">
                  <el-menu-item v-for="item in menuList" :key="item.index" @click="routerRedirect(item.index)"
                    :index="item.index">
                    <template slot="title">
                      <i :class="iconList[item.index]"></i>
                      <span style="margin-left:6px" slot="title">{{ item.menuName }} </span>
                    </template>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-aside>
            <el-main>
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-card>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data: function () {
    return {
      menuList: [
        { index: '0', menuName: '图书管理' },
        { index: '1', menuName: '用户管理' },
        { index: '2', menuName: '订单管理' },
        { index: '3', menuName: '评论管理' },
        { index: '4', menuName: '图书分类管理' },
        { index: '5', menuName: '退出' }
      ],
      iconList: ['iconfont icon-tushuguan', 'iconfont icon-yonghuguanli',
        'iconfont icon-dingdanguanli', 'iconfont icon-pinglun', 'iconfont icon-fenlei', 'iconfont icon-icon_tuichu-'],
      menuPath: ['/book', '/user', '/order', '/comment', '/bookType'],
      activeIndex: ''
    }
  },
  methods: {
    routerRedirect: function (index) {
      if (index >= 0 && index <= 4) {
        const redirectAddress = this.menuPath[index].toString()
        this.activeIndex = index
        this.$router.push(redirectAddress)
      } else if (index === 5) {
        console.log('退出系统')
      }
    }
  },
  mounted: function () {
    this.activeIndex = this.menuPath.indexOf('/' + window.location.href.split('/')[4]).toString()
  }
}
</script>

<style lang="less">
.el-main {
  padding-top: 0px;
}
html,
body,
#app {
  background-color: #e6e6e6;
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-menu-item {
  color: #777f8f;
}
.el-menu-item.is-active {
  color: #6681fa;
  background-color: #eaeeff;
}
.el-menu {
  height: 525px;
}
.icon {
  font-size: 15px;
}
.contain_box {
  height: 83%;
  width: 92%;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  > .el-card__body {
    padding: 0px;
    margin-top: 25px;
  }
}
.el-header {
  background-color: white;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}
.systemName {
  font-weight: bold;
  font-family: cursive;
  color: rgb(117, 117, 117);
  font-size: 30px;
  margin-left: 50px;
}
</style>
